import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { useArgs } from '@storybook/client-api';
import { Combobox, Field, Option, OptGroup, Tag } from '@zendeskgarden/react-dropdowns';
import { ComboboxStory } from './stories/ComboboxStory';
import { OPTIONS } from './stories/data';
import README from '../README.md';

<Meta
  title="Packages/Dropdowns/Combobox"
  component={Combobox}
  subcomponents={{
    Field,
    'Field.Hint': Field.Hint,
    'Field.Label': Field.Label,
    'Field.Message': Field.Message,
    Option,
    'Option.Meta': Option.Meta,
    OptGroup,
    Tag,
    'Tag.Avatar': Tag.Avatar
  }}
  args={{
    label: 'Label',
    isLabelRegular: false,
    isLabelHidden: false,
    hint: 'Hint',
    startIcon: false,
    renderValue: false,
    endIcon: false,
    listboxAriaLabel: 'Label',
    message: 'Message',
    validationLabel: 'Label',
    isEditable: true,
    listboxMaxHeight: '400px',
    listboxZIndex: 1000,
    options: OPTIONS
  }}
  argTypes={{
    label: { name: 'children', table: { category: 'Label' } },
    hint: { name: 'children', table: { category: 'Hint' } },
    startIcon: { control: 'boolean' },
    renderValue: { control: 'boolean' },
    endIcon: { control: 'boolean' },
    appendListboxToNode: { control: false },
    message: { name: 'children', table: { category: 'Message' } },
    validationLabel: { table: { category: 'Message' } },
    isLabelRegular: { name: 'isRegular', table: { category: 'Label' } },
    isLabelHidden: { name: 'hidden', table: { category: 'Label' } }
  }}
  parameters={{
    design: {
      allowFullscreen: true,
      type: 'figma',
      url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=103%3A24482'
    }
  }}
/>

# API

<ArgsTable />

# Demo

## Uncontrolled

<Canvas>
  <Story
    name="Uncontrolled"
    argTypes={{
      activeIndex: { control: false },
      inputValue: { control: false },
      isExpanded: { control: false },
      selectionValue: { control: false }
    }}
  >
    {args => <ComboboxStory {...args} />}
  </Story>
</Canvas>

## Controlled

<Canvas>
  <Story
    name="Controlled"
    args={{
      isExpanded: false,
      inputValue: '',
      activeIndex: -1,
      selectionValue: null
    }}
    argTypes={{
      defaultExpanded: { control: false },
      defaultSelectionValue: { control: false }
    }}
  >
    {args => {
      const updateArgs = useArgs()[1];
      const handleChange = changes => {
        const { type, ...args } = changes;
        updateArgs(args);
      };
      return <ComboboxStory {...args} onChange={handleChange} />;
    }}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
